<template>
  <!-- 管理后台页脚：显示版权信息、备案信息和返回首页链接 -->
  <footer class="admin-footer">
    <!-- 页脚内容容器 -->
    <div class="footer-content">
      <!-- 左侧：版权信息和备案信息 -->
      <div class="footer-left">
        <!-- 版权信息：显示网站版权声明 -->
        <span class="copyright">© 2024 零の守墓人的博客. All rights reserved.</span>
        <!-- 备案信息：显示网站备案号和备案图标 -->
        <span class="beian">
          <img src="../assets/pic/beian.png" alt="备案图标" class="beian-icon" />
          <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
            备案号：xxx-xxxxx号
          </a>
        </span>
      </div>
      <!-- 右侧：返回首页链接 -->
      <div class="footer-right">
        <!-- 返回博客首页链接：提供快速返回前台首页的功能 -->
        <router-link to="/" class="home-link">
          <el-icon>
            <House />
          </el-icon>
          返回博客首页
        </router-link>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
/**
 * 导入Element Plus图标组件
 * @description 用于显示返回首页的房屋图标
 */
import { House } from '@element-plus/icons-vue'
</script>

<style scoped lang="scss">
// 导入页脚组件样式
@use '../assets/styles/components/_footer';
</style>